<template>
    <div class="rightOne">
        <ThemeTitle :title="title1"/>
        <div class="videos">
            <div v-for="item in 6" :key="item">

            </div>
        </div>
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">视频统计</div>
            </div>
        </div>  
        <div class="videoDesc">
            <div class="videoNum">
                <span>视频总数</span>
                <span>258个</span>
            </div>
            <div id="videoChartOne">

            </div>
            <div id="videoChartTwo">

            </div>
        </div>
    </div>
</template>

<script>
import ThemeTitle from "../../common/ThemeTitle"
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  ref,
  provide
} from 'vue'
import { useRouter } from 'vue-router'
export default {
    components: {
        ThemeTitle
    },
    setup(){
        provide("title","应急管理视频");
        const {ctx} = getCurrentInstance();
        function drawChartOne(){
            var dom = document.getElementById("videoChartOne");
            var myChart = ctx.$echarts.init(dom);
            let option = {
                    grid: {
                        top: "20%",
                        bottom: "20%",//也可设置left和right设置距离来控制图表的大小
                        right:'5%'
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                            label: {
                                show: true
                            }
                        }
                    },
                    xAxis: {
                        data: [
                            "海口",
                            "三亚",
                            "儋州",
                            "文昌",
                            "琼海市",
                            "东方市",
                            "万宁市",
                            "定安县",
                            "屯昌县",
                            "澄迈县"
                        ],
                        axisLine: {
                            show: true, //隐藏X轴轴线
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            show: false //隐藏X轴刻度
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#fff" //X轴文字颜色
                            },
                            rotate:40  
                        },
                        
                    },
                    yAxis: [{
                            type: "value",
                            name: "个",
                            nameTextStyle: {
                                color: "#fff"
                            },
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#FFFFFF'
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#fff"
                                }
                            },
                            
                        },
                        {
                            type: "value",
                            name: "同比",
                            nameTextStyle: {
                                color: "#ebf8ac"
                            },
                            show:false,
                            position: "right",
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                formatter: "{value} %", //右侧Y轴文字显示
                                textStyle: {
                                    color: "#ebf8ac"
                                }
                            }
                        },
                        {
                            type: "value",
                            gridIndex: 0,
                            min: 50,
                            max: 100,
                            splitNumber: 8,
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                show: false
                            },
                            splitArea: {
                                show: true,
                                areaStyle: {
                                    color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                                }
                            }
                        }
                    ],
                    series: [{
                            name: "销售水量",
                            type: "line",
                            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                            smooth: true, //平滑曲线显示
                            showAllSymbol: true, //显示所有图形。
                            symbol: "circle", //标记的图形为实心圆
                            symbolSize: 0, //标记的大小
                            itemStyle: {
                                //折线拐点标志的样式
                                color: "#058cff",
                                
                            },
                            lineStyle: {
                                color: "#058cff"
                            },
                            areaStyle:{
                                color: "rgba(5,140,255, 0.2)"
                            },
                            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5,6,7]
                        },
                        {
                            name: "主营业务",
                            type: "bar",
                            barWidth: 15,
                            itemStyle: {
                                normal: {
                                    color: ctx.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: "#00FFE3"
                                        },
                                        {
                                            offset: 1,
                                            color: "#4693EC"
                                        }
                                    ])
                                },
                                borderRadius: [30, 30, 30, 30],
                            },
                            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5,6,7]
                        }
                    ]
                };
            myChart.setOption(option);
        }
        function drawchartTwo(){
                var dom = document.getElementById("videoChartTwo");
                var myChart = ctx.$echarts.init(dom);
                let option = {
                        animation: true,
                        title: {
                            text: "火点类型",
                            // "subtext": "火点类型",
                            x: "31%",
                            y: "center",
                            textStyle: {
                                color: "#fff",
                                fontSize: 18,
                                fontWeight: "normal",
                                align: "center",
                                width: "200px"
                            },
                            subtextStyle: {
                                color: "#fff",
                                fontSize: 18,
                                fontWeight: "normal",
                                align: "center"
                            }
                        },
                        legend: {
                            width: "30%",
                            left: "right",
                            textStyle: {
                                color: "#fff",
                                fontSize: 12
                            },
                            icon: "circle",
                            right: "0",
                            bottom: "0",
                            padding: [10, 30],
                            itemGap: 20,
                            data: ["工厂热源", "秸秆焚烧", "森林火灾", "草原火灾"]
                        },
                        series: [{
                            type: "pie",
                            center: ["40%", "50%"],
                            radius: ["65%", "90%"],
                            color: ["#F76F01", "#00FFFF", "#00FFA8", "#9F17FF", "#FFE400", "#F76F01", "#01A4F7", "#FE2C8A"],
                            startAngle: 135,
                            labelLine: {
                                normal: {
                                    length: 25
                                }
                            },
                            label: {
                                normal: {
                                    formatter: "{b|{b}:}\n{hr|}\n {per|{d}%} ",
                                    backgroundColor: "rgba(255, 147, 38, 0)",
                                    borderColor: "transparent",
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: "#999",
                                            lineHeight: 20,
                                            align: "center"
                                        },
                                        hr: {
                                            borderColor: "#aaa",
                                            width: "100%",
                                            borderWidth: 1,
                                            height: 0
                                        },
                                        b: {
                                            color: "#b3e5ff",
                                            fontSize: 14,
                                            lineHeight: 33
                                        },
                                        c: {
                                            fontSize: 14,
                                            color: "#eee"
                                        },
                                        per: {
                                            color: "#FDF44E",
                                            fontSize: 14,
                                            padding: [5, 8],
                                            borderRadius: 2
                                        }
                                    },
                                    textStyle: {
                                        color: "#fff",
                                        fontSize: 14
                                    }
                                }
                            },
                            emphasis: {
                                show:false,
                                position:[30,50],
                                label: {
                                    show: true,
                                    formatter: "{b|{b}:}  {per|{d}%}  ",
                                    backgroundColor: "rgba(255, 147, 38, 0)",
                                    borderColor: "transparent",
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: "#999",
                                            lineHeight: 22,
                                            align: "center"
                                        },
                                        hr: {
                                            borderColor: "#aaa",
                                            width: "100%",
                                            borderWidth: 1,
                                            height: 0
                                        },
                                        b: {
                                            color: "#fff",
                                            fontSize: 18,
                                            lineHeight: 33
                                        },
                                        c: {
                                            fontSize: 14,
                                            color: "#eee"
                                        },
                                        per: {
                                            color: "#FDF44E",
                                            fontSize: 25,
                                            padding: [5, 6],
                                            borderRadius: 2
                                        }
                                    }
                                }
                            },
                            data: [{
                                name: "工厂热源",
                                value: 55
                            }, {
                                name: "秸秆焚烧",
                                value: 30
                            }, {
                                name: "森林火灾",
                                value: 10
                            }, {
                                name: "草原火灾",
                                value: 5
                            }
                            
                            ]
                        }, {
                            type: "pie",
                            center: ["40%", "50%"],
                            radius: ["55%", "57%"],
                            label: {
                                show: false
                            },
                            data: [{
                                value: 78,
                                name: "实例1",
                                itemStyle: {
                                    normal: {
                                        color: {
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 0,
                                            type: "linear",
                                            global: false,
                                            // colorStops: [{
                                            //     offset: 0,
                                            //     color: "#9F17FF"
                                            // }, {
                                            //     offset: 0.2,
                                            //     color: "#01A4F7"
                                            // }, {
                                            //     offset: 0.5,
                                            //     color: "#FE2C8A"
                                            // }, {
                                            //     offset: 0.8,
                                            //     color: "#FEE449"
                                            // }, {
                                            //     offset: 1,
                                            //     color: "#00FFA8"
                                            // }],
                                            colorStops: [{
                                                offset: 0,
                                                color: "#fff"
                                            }, {
                                                offset: 0.2,
                                                color: "#fff"
                                            }, {
                                                offset: 0.5,
                                                color: "#fff"
                                            }, {
                                                offset: 0.8,
                                                color: "#fff"
                                            }, {
                                                offset: 1,
                                                color: "#fff"
                                            }]
                                        }
                                    }
                                }
                            }]
                        }]
                    }
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
        }
        onMounted(()=>{
           drawChartOne()
           drawchartTwo()
        })
        return {
          
        }
    }
}
</script>

<style lang="stylus" scoped>
    @import '../../../assets/varibles.styl'
    .rightOne
        .videos
            width:vw(364)
            height:vh(198)
            border:1px solid #0c586a
            margin-top:vh(18)
            padding:vh(6) vw(6)
            display:flex
            flex-wrap:wrap
            justify-content :space-between
            div
                flex-shrink:0
                width:vw(113)
                height:vh(89)
                border:1px solid #ddd
        .videoDesc
            .videoNum
                margin-top:vh(13)
                margin-bottom:vh(23)
                span:nth-child(1)
                    font-size:vw(15)
                span:nth-child(2)
                    font-size:vw(20)
                    color:rgba(255,189,57,1)
            #videoChartOne
                width:100%
                height: vh(130)
                border:1px solid #ddd
            #videoChartTwo   
                width:100%
                height: vh(160)
                margin-top:vh(20)
                margin-bottom:vh(20)
                border:1px solid #ddd
            
        .geoIntro
            width:vw(365)
            margin-top:vh(18)
            .geoIntroTitle
                margin-bottom:vh(13)
                display:flex
                .sideLine
                    width:vw(2)
                    height:vh(15)
                    margin-right:vw(10)
                    background: #86ceeb
                .geoIntroWord
                    color:#00EAFF
                    font-size:vw(16)
            .geoCarousel
                width: vw(365)
                height: vh(172)
                border: 1px solid #0c4259;
                padding-top:vh(8)
                padding-left:vw(8)
                .carouseContent
                    display:flex
                    .carouseImg 
                        flex-shrink:0 
                        width:vw(163)
                        height:vh(135)  
                        margin-right:vw(12)  
                        border:1px solid #ddd
                    .carouseWord
                        flex-shrink:0 
                        width:vw(168)
                        height:vh(139)  
                        padding:vh(12) vw(0)
                        line-height:vh(17)
</style>